<template>
  <div class="login">
    <div class="outerBox">
      <div class="titleOut">
        <span class="dslIcon">
          <!-- <img src="../../../assets/images/login.png" alt="" width="100%" height="100%"> -->
          </span>
        <span class="userTitle">方寸</span>
      </div>
      <div class="box">
        <div class="boxPic">
          <!-- <img class="boxImg" src="../../../assets/images/loginPic.jpg" alt=""> -->
        </div>
        <div class="boxLine"></div>
        <div class="userFrom">
          <div class="formTitle">账号登录</div>
          <el-input v-model="userName" placeholder="请输入用户名/邮箱/手机号" style="margin-bottom:24px;" class="formIpt"></el-input>
          <el-input v-model="PassWord" placeholder="请输入密码" style="margin-bottom:25px;" class="formIpt" type="password"></el-input>
          <div>
            <el-checkbox v-model="checked" class="remember">记住账号</el-checkbox>
            <span class="formTips" @click="forgetPsw">忘记密码</span>
          </div>
          <el-button type="primary" class="formBtn" :disabled="btnState" @click="formBtn">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'login',
  data() {
    return {
      userName: 'admin',
      PassWord: '123456',
      checked: false
    }
  },
  computed: {
    btnState() {
      let state = true
      if (this.userName && this.PassWord) {
        state = false
      }
      return state
    }
  },
  methods: {
    forgetPsw() {
      //
    },
    formBtn() {
      this.$router.push({ name: '/dashboard' })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
// @import '../../../assets/stylus/variable'
.login, .outerBox
  width 1000px
  height auto
.titleOut
  width 500px
  display flex
  flex-flow row
  margin 0 auto
  .userTitle
    width 430px
    text-align center
    font-size $font-size-SupBig
    font-family microsoft yahei
    color $color-text
    line-height 58px
  .dslIcon
    display block
    width 58px
    height 58px
    margin-right 28px
.box
  width 1000px
  height 493px
  background $bg-normal
  margin 62px auto
  overflow hidden
  display flex
  flex-flow row
  margin-bottom 0
  .boxPic
    width 544px
    height 400px
    margin 35px 26px 58px 24px
    .boxImg
      width 100%
      height 100%
  .boxLine
    width 1px
    height 397px
    background $color-border
    margin 36px 27px 0 0
  .userFrom
    width 354px
    height 397px
    margin-top 36px
    .formTitle
      color $color-text
      font-family microsoft yahei
      font-size $font-size-medBig
      margin 23px 0 51px 0
    .formIpt
      width 354px
      height 40px
    .formBtn
      width 354px
      height 40px
      border-radius 4px
      margin-top 28px
      font-size $font-size-big
    .remember
      font-size $font-size-normal
      font-family microsoft yahei
      color $color-text
    .formTips
      float right
      font-size $font-size-normal
      font-family microsoft yahei
      color $color-theme
      cursor pointer
</style>
